<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>会议直播系统</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			html, body {
				background-color: #efeff4;
			}
			ul {
				font-size: 14px;
				color: #8f8f94;
			}
			.mui-btn {
				padding: 10px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="padding-right: 15px;">
			<h1 id="title" class="mui-title">首页</h1>
		</header>
		<div class="mui-content"></div>
		<nav class="mui-bar mui-bar-tab">
			<a id="defaultTab" class="mui-tab-item mui-active" href='tab-webview-subhome.html'>
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href='tab-webview-sublive.html'>
				<span class="mui-icon mui-icon-videocam"></span>
				<span class="mui-tab-label">直播</span>
			</a>
			<a class="mui-tab-item" href='tab-webview-subcamera.html'>
				<span class="mui-icon mui-icon-camera"></span>
				<span class="mui-tab-label">录像</span>
			</a>
			<a class="mui-tab-item" href='tab-webview-subsetting.html'>
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">我</span>
			</a>
		</nav>
	</body>

</html>
<script src="js/mui.min.js"></script>
<script src="js/app.js"></script>
<script src="js/config.js"></script>
<script src="js/server.js"></script>
<script type="text/javascript" charset="utf-8">
	//	mui初始化显示界面
	var firstBack;
	mui.init({
		beforeback: function() {
			if(!firstBack) {
				mui.toast('再按一次退出应用');
				firstBack = true;
				setTimeout(function() {
					firstBack = null;
				}, 1000);
				return false;
			}
			plus.runtime.quit();
		}
	});

	//	页面刷新
	window.addEventListener("myfresh", function(e) {
		location.reload();
	});

	mui.plusReady(function() {

		var subpages = ['tab-webview-subhome.html', 'tab-webview-sublive.html', 'tab-webview-subcamera.html', 'tab-webview-subsetting.html'];
		var subpageStyle = {
			top: '45px',
			bottom: '51px'
		};

		var title = document.getElementById("title");
		var self = plus.webview.currentWebview(); //当前页面

		for(var i = 0; i < subpages.length; i++) {
			var sub = plus.webview.create(subpages[i], subpages[i], subpageStyle); //当前Webview的URL地址、ID、样式。功能：创建子窗体
			sub.hide(); //功能：隐藏页面
			self.append(sub); //功能： 追加子页面,首个选项卡页面显示，其它均隐藏
		}

		window.addEventListener("myfresh", function(e) {
			location.reload();
		});

		plus.webview.show(subpages[0]);
		var activeTab = subpages[0];

		mui(".mui-bar-tab").on("tap", "a", function(e) { //通过.mui-bar-tap里的a元素绑定tap事件，达到批量绑定的效果
			var tagPage = this.getAttribute("href"); //getAttribute()获取属性函数
			title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;

			if(activeTab != tagPage) {
				switch(tagPage) {
					case subpages[0]:
						var subhomePage = plus.webview.getWebviewById('tab-webview-subhome.html');
						if(subhomePage) {
							mui.fire(subhomePage, 'myfresh');
						}
						break;
					case subpages[1]:
						var sublivePage = plus.webview.getWebviewById('tab-webview-sublive.html');
						if(sublivePage) {
							mui.fire(sublivePage, 'myfresh');
						}
						break;

					case subpages[2]:
						var subcameraPage = plus.webview.getWebviewById('subcamera.html');
						if(subcameraPage) {
							mui.fire(subcameraPage, 'myfresh');
						}
						break;
					default:
						break;
				}

				plus.webview.show(tagPage, "fade-in", 100) //fade-in淡入，100毫秒
				activeTab = tagPage;
			}
		});

	});

	</script>